<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px;">
      <a-breadcrumb-item>考勤管理</a-breadcrumb-item>
      <a-breadcrumb-item>排班管理详情</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row>
      <a-spin :spinning="loading">
        <a-table :columns="columns"
                 :data-source="tableData"
                 :scroll="{ x: 1850 }">
        </a-table>
      </a-spin>
    </a-row>
  </div>
</template>
<script>
import { Modal } from 'ant-design-vue'
import { message } from 'ant-design-vue'
export default {
  data() {
    return {
      tableData: [],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
          width: 100,
        },
      ],
      queryForm: { current: 20, offset: 1 },
      loading: false,
    }
  },
  mounted() {
    for (let index = 0; index < 31; index++) {
      this.columns[index + 1] = {
        title: `day${index + 1}`,
        dataIndex: `day${index + 1}`,
        key: `day${index + 1}`,
        width: 100,
      }
    }
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      const url = 'government-platform-center/schedulingType'
      this.$axios.get(url, this.queryForm).then((res) => {
        if (res.data.code == 0) {
          this.tableData = res.data.data
          this.total = res.data.total
          console.log(this.columns, 'this.columns')
          this.tableData = [
            {
              name: '张三',
              day1: '早班',
              day2: '早班',
              day3: '早班',
              day4: '早班',
              day5: '早班',
              day6: '早班',
            },
            {
              name: '李四',
              day1: '早班',
              day2: '早班',
              day3: '早班',
              day4: '早班',
              day5: '早班',
              day6: '早班',
            },
            {
              name: '王五',
              day1: '早班',
              day2: '早班',
              day3: '早班',
              day4: '早班',
              day5: '早班',
              day6: '早班',
            },
          ]
          this.loading = false
        }
      })
    },
    delFn(text, record) {
      console.log(text, record)
      const that = this
      Modal.confirm({
        title: '确认删除',
        content: '您确定要删除这项内容吗？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          const url = `/government-platform-center/schedulingType?id=${text.id}`
          that.$axios.delete(url).then((res) => {
            if (res.data.code == 0) {
              that.getList()
              message.success('操作成功')
            }
          })
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log('删除已取消')
        },
      })
    },
  },
}
</script>
<style scoped>

.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

/deep/.ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/.ant-table-tbody > tr > td {
  color: #000;
}

.ant-switch-checked {
  background: #13c75b;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}
</style>